<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    img {
        margin-top:400px;
        width: 250px;
        display: block;
    }
</style>
<body>
<!--随着滚动 data-url里的内容会替换掉src的值-->
<img src="" data-url="../JS手写题/图片懒加载 star star/1pxImg.png">
<img src="" data-url="../JS手写题/图片懒加载 star star/1pxImg.png">
<img src="" data-url="../JS手写题/图片懒加载 star star/1pxImg.png">
<img src="" data-url="../JS手写题/图片懒加载 star star/1pxImg.png">
<img src="" data-url="../JS手写题/图片懒加载 star star/1pxImg.png">

<script>
    //? 拿到标签img
    const imgs = document.getElementsByTagName('img')
    //? 创建观察器(IntersectionObserver 异步函数)实例 传入一个回调函数作为参数，new的时候执行一次，每当观察目标元素进入或离开另一个元素的可见区域时，也会执行该回调函数。
    //? 第一个参数是个包含有若干个 IntersectionObserverEntry 对象的数组，每个 IntersectionObserverEntry 对象都代表一次相交，它的属性们就包含了那次相交的各种信息 描述了目标元素与其根元素容器在某一特定过渡时刻的交叉状态
    let io = new IntersectionObserver((entires) =>{
        console.log('进来了',entires)
        //? 因为img标签有五个 所以entires也有五个
        //? 对每一个对象
        entires.forEach(item => {
            //? 原图片元素  即上面的五个标签
            let oImg = item.target
            //? 范围判断
            if (item.intersectionRatio > 0 && item.intersectionRatio <= 1) {
                //? 将src属性替换为data-url的值
                oImg.setAttribute('src', oImg.getAttribute('data-url'))
                //? 替换完了就可以解除当前图片的观察了
                io.unobserve(item.target);
            }

        })
    })
    //? 给每一个图片设置观察器 这个会先执行 因为IntersectionObserver方法是异步(当然同步执行时io已经创好了)
    Array.from(imgs).forEach(element => {
        console.log('tianjiale')
        io.observe(element)
    });
</script>
</body>
</html>
